<template>
  
  <div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="歌手" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  
  <el-form-item label="歌曲" prop="address">
    <el-input type="texgetarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>

</el-form>





<el-table
      :data="tableData"
      style="width: 100%">
      
      <el-table-column
        prop="name"
        label="歌手"
        width="180">

        <template slot-scope="scope">
            <!-- scope.row 本条数据 这样时作用域插槽 scope时插槽的返回数据 -->
            <el-tag size="medium" style="color:red">{{ scope.row.name }}</el-tag>
        </template>

      </el-table-column>
      
      <el-table-column prop="address" label="歌曲"></el-table-column>
      <el-table-column label="操作">
      <template slot-scope="scope">
        <!-- <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
        <el-button
          size="mini"
           @click="dialogFormVisible = true">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
      
    </el-table>






    <el-dialog title="信息" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="歌手" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="歌曲" :label-width="formLabelWidth">
      <el-input v-model="form.address" autocomplete="off"></el-input>

      <!-- <el-select v-model="form.address" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select> -->
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>

  </div>
</template>

<script>
export default {
    data(){



        return{
             ruleForm: {
          
          name: '',
          address: ''
        },



        tableData: [
            {
            
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, 
          {
            
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, 
          {
           
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, 
          {
           
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
          ],



          rules: {

          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            // required: true, 是否必填 message:"请输入活动名称" 错误提示
            // trigger:"blur" 触发条件 blur 失去焦点
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        },



        dialogFormVisible: false,
        form: {
          name: '',
        //   region: '',
        //   date1: '',
        //   date2: '',
        //   delivery: false,
        //   type: [],
        //   resource: '',
        //   desc: ''
          address:''
        },
        formLabelWidth: '120px'
           





        }
    },
    computed:{
        
    },
    methods:{
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
        handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
        
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.tableData.splice(index,1);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
        

    }

}
</script>

<style>

</style>